<template>
  <div class="home-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>UX Element 组件库</h2>
        </div>
      </template>
      
      <div class="card-content">
        <p>UX Element 是一个基于 Element Plus 的 Vue 3 组件库，提供了一系列易用且功能强大的业务组件，帮助开发者快速构建中后台应用。</p>
        
        <div class="features">
          <h3>主要特性</h3>
          <ul>
            <li>🚀 基于 Vue 3、TypeScript、Element Plus 开发</li>
            <li>📦 开箱即用的高质量组件</li>
            <li>🔧 完全可定制的主题</li>
            <li>📱 响应式设计，支持各种屏幕尺寸</li>
            <li>⚡️ 按需引入，体积小巧</li>
            <li>🔄 使用 Composition API，提供更好的类型提示</li>
          </ul>
        </div>
        
        <div class="components-grid">
          <el-card v-for="item in components" :key="item.name" shadow="hover" class="component-card">
            <div class="component-icon">
              <el-icon :size="40"><component :is="item.icon" /></el-icon>
            </div>
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
            <el-button type="primary" @click="navigate(item.path)">查看示例</el-button>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Document, Grid, TopRight, Right, Search, EditPen, InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

const components = [
  {
    name: '表单组件',
    description: '可配置化的动态表单组件，支持多种布局和校验方式',
    icon: Document,
    path: '/components/form'
  },
  {
    name: '表格组件',
    description: '功能强大的表格组件，支持搜索、排序、分页等功能',
    icon: Grid,
    path: '/components/table'
  },
  {
    name: '搜索表单',
    description: '高级搜索表单组件，支持多种输入类型和筛选功能',
    icon: Search,
    path: '/components/e-search-form'
  },
  {
    name: 'DIY编辑器',
    description: '可视化页面编辑器，支持拖拽组件和移动端页面装修',
    icon: EditPen,
    path: '/components/diy-editor'
  },
  {
    name: '文档提醒',
    description: '开发环境文档链接提醒组件，便于快速访问相关文档',
    icon: InfoFilled,
    path: '/components/doc-alert'
  },
  {
    name: '弹窗组件',
    description: '简单易用的弹窗组件，支持多种使用方式',
    icon: TopRight,
    path: '/components/dialog'
  },
  {
    name: '搜索组件',
    description: '基础搜索组件，支持多种搜索模式',
    icon: Right,
    path: '/components/search'
  }
]

const navigate = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.card-content {
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.features {
  margin: 24px 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.features h3 {
  margin-top: 0;
  color: #303133;
}

.features ul {
  padding-left: 20px;
}

.features li {
  margin-bottom: 8px;
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.component-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.component-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409EFF;
  margin-bottom: 16px;
}

.component-card h3 {
  margin: 8px 0;
  color: #303133;
}

.component-card p {
  margin-bottom: 16px;
  flex-grow: 1;
  color: #606266;
}
</style> 